<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>设置</title>

    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="Portal - Bootstrap 5 Admin Dashboard Template For Developers">
    <meta name="author" content="Xiaoying Riley at 3rd Wave Media">
    <link rel="shortcut icon" href="/assets/favicon.ico">

    <script defer src="/assets/js/jquery-2.1.4.js"></script>
    <!-- FontAwesome JS-->
    <script defer src="/assets/plugins/fontawesome/js/all.min.js"></script>

    <!-- App CSS -->
    <link id="theme-style" rel="stylesheet" href="/assets/css/portal.css">

</head>

<input type="number" style="display: none" id="uid" th:value="${user.getUid()}">
<body class="app">
<header th:replace="template.html::header"></header><!--//app-header-->

<div class="app-wrapper">

    <div class="app-content pt-3 p-md-3 p-lg-4">
        <div class="container-xl">
            <h1 class="app-page-title">设置</h1>
            <hr class="mb-4">
            <div class="row g-4 settings-section">
                <div class="col-12 col-md-4">
                    <h3 class="section-title">个人信息</h3>
                    <div class="section-intro">设置你的个人信息</div>
                </div>
                <div class="col-12 col-md-8">
                    <div class="app-card app-card-settings shadow-sm p-4">

                        <div class="app-card-body">
                            <div class="settings-form">
                                <div class="mb-3">
                                    <label for="name" class="form-label">名称</label>
                                    <input type="text" class="form-control" id="name" th:value="${user.getName()}"
                                           required>
                                </div>
                                <div class="mb-3">
                                    <label for="account" class="form-label">账号</label>
                                    <input type="text" class="form-control" id="account" th:value="${user.getAccount()}"
                                           required>
                                </div>
                                <div class="mb-3">
                                    <label for="face" class="form-label">头像地址</label>
                                    <div th:if="${user.getPerm().equals('user')}" type="text" class="form-control"
                                         style="color: red">
                                        购买vip即可修改头像
                                    </div>
                                    <input th:if="${!user.getPerm().equals('user')}" type="text" class="form-control"
                                           id="face" th:value="${user.getFace()}">
                                </div>
                                <button id="save-profile" class="btn app-btn-primary">保存</button>
                            </div>
                        </div><!--//app-card-body-->
                    </div><!--//app-card-->
                </div>
            </div><!--//row-->
            <hr class="my-4">
            <div class="row g-4 settings-section">
                <div class="col-12 col-md-4">
                    <h3 class="section-title">修改密码</h3>
                    <div class="section-intro">修改你的密码</div>
                </div>
                <div class="col-12 col-md-8">
                    <div class="app-card app-card-settings shadow-sm p-4">
                        <div class="app-card-body">
                            <div class="settings-form">
                                <div class="mb-3">
                                    <label for="new-password" class="form-label">新密码</label>
                                    <input type="password" class="form-control" id="new-password" required>
                                </div>
                                <div class="mb-3">
                                    <label for="re-password" class="form-label">确认密码</label>
                                    <input type="password" class="form-control" id="re-password" required>
                                </div>
                                <button id="reset-password" class="btn app-btn-primary">修改密码</button>
                            </div>
                        </div><!--//app-card-body-->
                    </div><!--//app-card-->
                </div>
            </div><!--//row-->
        </div><!--//container-fluid-->
    </div><!--//app-content-->
</div><!--//app-wrapper-->


<!-- Javascript -->
<script src="/assets/plugins/popper.min.js"></script>
<script src="/assets/plugins/bootstrap/js/bootstrap.min.js"></script>

<!-- Page Specific JS -->
<script src="/assets/js/app.js"></script>
<script type="text/javascript">
    var user = {}
    window.onload = function () {
        $.ajax({
            url: '/ms/api/user/' + document.getElementById('uid').value,
            method: 'get',
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (result) {
                user = result
                for (var x in user) document.getElementById(x).value = user[x]
            }
        })
    }

    document.getElementById('save-profile').onclick = function () {
        user['name'] = document.getElementById('name').value
        user['account'] = document.getElementById('account').value
        var face = document.getElementById('face')
        if (face !== null) user['face'] = face.value
        $.ajax({
            url: '/ms/api/user',
            method: 'put',
            data: JSON.stringify(user),
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (result) {
                if (result['success']) location.reload()
                else alert('保存失败')
            }
        })
    }

    document.getElementById('reset-password').onclick = function () {
        var newpass = document.getElementById('new-password').value
        var repass = document.getElementById('re-password').value
        if (newpass !== repass) {
            alert('两次密码不一致!')
            return
        }
        user['password'] = newpass

        $.ajax({
            url: '/ms/api/user',
            method: 'put',
            data: JSON.stringify(user),
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (result) {
                if (result['success']) location.reload()
                else alert('修改密码失败')
            }
        })
    }
</script>
</body>
</html> 

